<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width" name="viewport">
    <title>商城</title>
    <link rel="stylesheet" type="text/css" href="../css/weui.css" />
    <link rel="stylesheet" type="text/css" href="../css/jquery-weui.css" />
    <link rel="stylesheet" type="text/css" href="../css/shequ.css"/>
    <link rel="stylesheet" type="text/css" href="../css/demos.css"/>
    <style>
        #content_container{
            position:absolute;
            top:0;
            width:100%;
            height:45px;
            background:#eee;                       
        }
        .left{
            float:left;
            padding:12px 0 2px 2px;
        }
        .right{
            float:right;
            padding:12px 2px 2px 0;
        }
        .icon_back{
            display:inline-block;
            width:18px;
            height:15px;
            background:url(../images/back.png) no-repeat;
            background-size:15px 15px;
        }
         .icon_index{
            display:inline-block;
            width:18px;
            height:15px;
            background:url(../icon/index.png) no-repeat;
            background-size:18px 18px;
        }
         .index_image {
            background: #fff;
            min-height: 90px;
            overflow-y: hidden;
            text-align: center;
        }
        .index_image a{
            color:#333;
        }        
        .index_image img {
            display: block;
            width: 50px;
            height: 50px;
            margin: 0 auto;
            border-radius:50%;            
        }
        .swiper-container {
            width: 100%;
        }
        #search_sure{
            height:24px;
            font-size:12px;
            padding:2px;
            line-height:24px;
            border-radius:5px;
            color:#fff;
            background:#89c5a9;
        }
        .weui-media-box__title span{
            color:#e3e64c;
        }
        .no_search{
            text-align:center;
            color:#da5a7d;
        }
        .no_search img{
            width:100%;
            height:200px;
        }
        #shopping{
            position:fixed;
            left:10;
            top:50%;
            width:40px;
            height:40px;
            cursor:pointer;
        }
        #shopping a{
            display:block;
            width:40px;
            height:40px;
            border-radius:50%;           
            text-align:center;
            line-height:50px;
            background-color:rgba(255,102,0,0.5);           

        }
        #shopping i{
         display:inline-block;
         width:20px;
         height:20px;
         background:url(./icon/shop.png) no-repeat;
         background-size:20px 20px;
         -webkit-font-smoothing: antialiased;         
        } 
    </style>
</head>
<body>
<div id="content_container">
    <div class="left" onclick="history.go(-1)"><i class="icon_back"></i>返回</div>
    <div class="right" id="next_section"><a href="../index.html">首页<i class="icon_index"></i></a></div>
</div>
<!--content-->
    <div class="weui_tab_bd" style="margin-top:45px;background:#fff">
        <div class="swiper-container" data-space-between='10' >
            <div class="swiper-wrapper" >
                <div class="swiper-slide" ><img style="width:100%" src="../images/1.jpg" alt=""></div>
                <div class="swiper-slide" ><img style="width:100%" src="../images/2.jpg" alt=""></div>
                <div class="swiper-slide"><img style="width:100%" src="../images/3.jpg" alt=""></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="weui-row">
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="https://img30.360buyimg.com/mobilecms/jfs/t1951/49/1526652906/3778/e2fe4d0c/56bbf7eaN94f6d38e.png">中秋</a></div></div>
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="https://img30.360buyimg.com/mobilecms/jfs/t1951/49/1526652906/3778/e2fe4d0c/56bbf7eaN94f6d38e.png">元旦</a></div></div>
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="https://img30.360buyimg.com/mobilecms/jfs/t1951/49/1526652906/3778/e2fe4d0c/56bbf7eaN94f6d38e.png">国庆</a></div></div>
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="https://img30.360buyimg.com/mobilecms/jfs/t1951/49/1526652906/3778/e2fe4d0c/56bbf7eaN94f6d38e.png">天猫</a></div></div>
        </div>
        <div class="weui-row">
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="https://img30.360buyimg.com/mobilecms/jfs/t1951/49/1526652906/3778/e2fe4d0c/56bbf7eaN94f6d38e.png">超市</a></div></div>
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="https://img30.360buyimg.com/mobilecms/jfs/t2086/295/2173920743/10014/85b3a7ac/56bbf7f7N99dfa824.jpg">生鲜</a></div></div>
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="https://img30.360buyimg.com/mobilecms/jfs/t2068/260/2270432834/3558/e232f836/56bbf806Nfc74399a.png">美食</a></div></div>
            <div class="weui-col-25"><div class="index_image"><a href="#"><img src="https://img30.360buyimg.com/mobilecms/jfs/t2122/145/2240662998/8952/c1de3517/56bbf815N35c25b53.jpg">外卖</a></div></div>
        </div>
        <div id="product_list" style="width:100%;height:196px">
        <div class="products">
        <div class="p_l">
            <img src="http://cdn.pic.youzhipai.cn/pic/readPic?begin=91156460&amp;end=91196046">
            <p>派生百橙汁</p>
        </div>
            <div class="tips">        
            <span class="color-danger">$165</span>
            <i class="cart"></i>        
    </div>
    </div>
        <div class="products">
        <div class="p_l">
            <img src="http://cdn.pic.youzhipai.cn/pic/readPic?begin=91156460&amp;end=91196046">
            <p>派生百橙汁</p>
        </div>
            <div class="tips">        
            <span class="color-danger">$165</span>
            <i class="cart"></i>        
    </div>
    </div>
    </div>


        <div id="list" class='demos-content-padded'></div>
    </div> 
<div class="weui_tabbar">
    <a href="#" class="weui_tabbar_item weui_bar_item_on">
        <div class="weui_tabbar_icon">
            <img src="../images/iconfont-home.png" alt="">
        </div>
        <p class="weui_tabbar_label">商品列表</p>
    </a>
    <a href="#" class="weui_tabbar_item">
        <div class="weui_tabbar_icon">
            <img src="../images/iconfont-cart.png" alt="">
        </div>
        <p class="weui_tabbar_label dianji">商品详情</p>
    </a>

    <a href="./market_me.html" class="weui_tabbar_item ">
        <div class="weui_tabbar_icon">
            <img src="../images/iconfont-wo.png" alt="">
        </div>
        <p class="weui_tabbar_label">我</p>
    </a>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="../js/jquery-weui.js"></script>
<script src="../js/swiper.js"></script>
<script src="../js/myapp.js"></script>
<script>
//首页banner
    $(".swiper-container").swiper({
        loop: true,
        autoplay: 3000,
        pagination: '.swiper-pagination',
        paginationClickable: true
    });
//功能未开发
    $('.dianji').click(function(){
        $.toast("还在开发中",1000);
    }) 



</script>
</body>
</html>